/*
 * @Author: mayijun
 * @Date: 2022-05-14 11:12:52
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-09 17:57:23
 */
//带拖拽功能的tree组件
import { defineComponent, PropType, reactive } from 'vue';
import './index.scss';
import { ElTree } from 'element-plus';
import CommonDrag from '../commonDrag';

const DragTree = defineComponent({
  name: 'DragTree',
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    treeTitle: {
      type: String,
      default: ''
    },
    //默认展开
    nodeKey: {
      type: String,
      default: ''
    }
  },
  emits: ['refreshTree', 'search', 'update:nodeKey'],
  setup: (props, { slots, attrs, emit }) => {
    let state = reactive({
      searchVal: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'cnName'
      }
    });

    //刷新树结构
    const refreshTree = (type: any, id: any) => {
      emit('refreshTree', type, id);
    };

    //展开树
    const treeExpand = (data: any) => {
      emit('update:nodeKey', data.cnName);
    };

    //关闭树
    const treeCollapse = (data: any) => {
      emit('update:nodeKey', '');
    };

    return () => {
      return (
        <div class="drag-tree">
          <div class="tree-title">{props.treeTitle}</div>
          <ElTree
            class="tree-wrap"
            data={props.treeData}
            props={state.defaultProps}
            expand-on-click-node={false}
            node-key="cnName"
            default-expanded-keys={[props.nodeKey]}
            onNode-expand={treeExpand}
            onNode-collapse={treeCollapse}
            empty-text="暂无数据"
            v-slots={{
              default: (item: any) => {
                if (item.data.dataType || item.data.dimensionType) {
                  return (
                    <CommonDrag
                      onRefreshTree={refreshTree}
                      nodedata={item.data}
                    />
                  );
                }
                return (
                  <div class="node-item">
                    <a-tooltip
                      effect="dark"
                      placement="top"
                      v-slots={{
                        content: () => (
                          <>
                            <span>{item.data.cnName}</span>
                            <span>
                              {item.data.num ? '(' + item.data.num + ')' : ''}
                            </span>
                          </>
                        )
                      }}
                    >
                      <span class="node-name">{item.data.cnName}</span>
                      <span class="node-num">
                        {item.data.num ? '(' + item.data.num + ')' : ''}
                      </span>
                    </a-tooltip>
                  </div>
                );
              }
            }}
          ></ElTree>
        </div>
      );
    };
  }
});

export default DragTree;
